Vue.js でアクセシブルなコンポーネントをつくるために 草案
1
WebサイトからWebアプリケーションへの変遷
https://gyazo.com/21c5c938a4cb3ab125d680cb326e208c
2
No ARIA is better than Bad ARIA
fragment 処理を忘れない
<table>や<ul>などを親にもつ場合
基本的にはテキストで提供するようにする
オーバーラップされることを気をつける
タグによっては使用できない
「完全に消す」ということを理解する
値を誤ると都度通知されてしまう
aria-live="assertive"
ただし
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
を理解する
3
ルールを確認する
code:example-heading-vue.html
<script setup lang="ts">
import { computed, defineProps } from 'vue';
type Props = {
headlineLevel: 1 | 2 | 3 | 4 | 5 | 6;
headlineText: string;
}
const props = defineProps<Props>();
const headlineTag = computed(() => h${props.headlineLevel});
const headingText = computed(() => props.headlineText);
</script>
<template>
<component :is="headlineTag">
{{ headingText }}
</component>
</template>
4
ルールは検討する
alt-text
代替の内容が必要な際にalt、aria-labelなどがあるかのチェック
aria-props
定義されていないaria属性(タイポ含む)をチェック
aria-role
存在しないもの、abstractなroleの使用をチェック
aria-unsupported-elements
aria属性を使用できないタグで使用していないかチェック
no-redundant-roles
タグに重複したroleを付与していないかチェック
role-has-required-aria-props
roleの使用において必要になるaria属性があるかチェック vue-parser を使用する
5
より深みを知っていく
WCAGに沿ってアクセシブルにするガイドラインを知ろう!